{extends file="assets::smarty-templates::Master"|ToPath}
{block name="content"}
{html_css file="whiteLabel/light/jquery.datatables.css"}
{html_css file="tooltip/coda.css"}

<h1>Capacitaciones</h1>
<div style="overflow: hidden;">
    <a style="float: right" href="{$logout}" class="small btn icon i_exit">Cerrar Sesi&oacute;n</a>
</div>
<fieldset>
    <table class="datatable">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Capacidad por Itinerario</th>
                <th>No. Itinerarios</th>
                <th>No. Inscritos</th>
                <th style="width: 100px;"></th>
            </tr>
        </thead>
        <tbody>
            {foreach $capacitaciones as $capacitacion}
                <tr>
                    <td>{$capacitacion['nombre']}</td>
                    <td>{$capacitacion['capacidad']}</td>
                    <td>{$capacitacion['numeroItinerarios']}</td>
                    <td>{$capacitacion['numeroInteresados']}</td>
                    <td>
                        <a href="{$verInteresados}&idCapacitacion={$capacitacion["id"]}" class="small btn onlyicon icon tooltip i_users" title="Ver Inscritos"></a>
                        <a href="{$verItinerarios}&idCapacitacion={$capacitacion["id"]}" class="small btn onlyicon icon tooltip i_calendar" title="Ver Itinerarios"></a>
                        <a href="{$eliminarCapacitacion}&idCapacitacion={$capacitacion["id"]}" class="small btn onlyicon icon tooltip i_trashcan" title="Eliminar"></a>
                    </td>
                </tr>
            {/foreach}
        </tbody>
    </table>
</fieldset>
<a href="{$crearCapacitacion}" class="small btn icon i_plus">Crear Capacitaci&oacute;n</a>
            
<script type="text/javascript">
    {literal}
        require(["WhiteLabel.datatables", "jQuery.ToolTip", "jquery"], function(jQuery){
            jQuery(document).ready(function($){
                $(".tooltip").tooltip({
                    track: true,
                    delay: 0,
                    fixPNG: true,
                    top: -5,
                    left: 30
                });
                /*
                    top: 15,
                    left: 10
                */ 
            });
        });
    {/literal}
</script>
{/block}